<template>
  <div class="music-icon" :style="{ width: size + 'px', height: size + 'px' }">
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
    </svg>
  </div>
</template>

<script>
export default {
  name: 'MusicIcon',
  props: {
    size: {
      type: Number,
      default: 48
    }
  }
}
</script>

<style scoped>
.music-icon {
  background: #282828;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #b3b3b3;
  flex-shrink: 0;
}

.music-icon svg {
  width: 60%;
  height: 60%;
}
</style> 